<template>
  <div class="brand">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </form>
    <van-tabs
      swipeable
      :title-active-color="activeColor"
      :title-inactive-color="inactiveColor"
      @click="titleClick"
    >
      <van-tab v-for="(item, index) in tempArray" :title="item" :key="index">
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  components: {},
  data() {
    return {
      value: '',
      tempArray: [
        '纹眉',
        '美甲',
        '美睫',
        '美容sPA',
        '美妆',
        '纹眉',
        '美甲',
        '美睫',
        '美容sPA',
        '美妆',
      ],
      activeColor: '#1F0D44',
      inactiveColor: '#9F9F9F',
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    onSearch(val) {
      console.log(val)
      Toast('搜索')
    },
    onCancel() {
      Toast('取消')
    },
    titleClick(title) {
      console.log(title)
    },
  },
}
</script>

<style scoped lang="scss">
::v-deep .van-cell__value {
  height: 32px;
  line-height: 32px;
   width: 311px;
}
::v-deep .van-field__left-icon {
  line-height: 32px;
}
::v-deep .van-search__content {
  border-radius: 17px;
}
::v-deep .van-cell {
  padding: 0;
}
::v-deep .van-tabs__line {
  display: none;
}
::v-deep .van-tab--active {
  font-weight: bold;
  font-size: 14px;
}
</style>
